<template>
  <m-page>
    <template #head>
      <m-navbar :left-arrow="false" bg-color="#FFF" :title="title" />
    </template>
    <template #foot>
      <tabbar value="user" />
    </template>

    <div class="m-card">
      <div class="user-info">
        <div class="head-bar" @click="headBarHandle">
          <van-image :src="userInfo.avatar" round width="78" />
          <span class="head-bar-right" v-if="userInfo.nickname || userInfo.mobile">
            <span>
              <span class="name" v-if="userInfo.nickname">{{userInfo.nickname}}</span>
              <span class="phone">{{userInfo.mobile}}</span>
            </span>
            <i class="iconfont icon-watt-right"></i>
          </span>
          <span class="head-bar-right" v-else>
            <span>未登录</span>
            <i class="iconfont icon-watt-right"></i>
          </span>
        </div>
        <div class="hashboard">
          <div class="board-item">
            <count-up :end-val="666" />
            <span>积分</span>
          </div>
          <div class="board-item">
            <count-up :end-val="5" />
            <span>收藏</span>
          </div>
          <div class="board-item">
            <count-up :end-val="90" />
            <span>健康值</span>
          </div>
          <div class="board-item">
            <count-up :end-val="0" />
            <span>邀请人</span>
          </div>
        </div>
      </div>
      <div v-if="isVip" class="user-vip">
        <span class="s-title">银卡</span>
        <span class="small"><span>查看特权</span><i class="iconfont icon-watt-right"></i></span>
      </div>
    </div>
    <div class="m-icon-card">
      <div class="grid-item">
        <div><van-image src="https://static.jsvue.cn/5600g/sfc/icons/village.svg" width="38" /></div>
        <span class="grid-item-title">我的卡券</span>
      </div>
      <div class="grid-item">
        <div><van-image src="https://static.jsvue.cn/5600g/sfc/icons/advertise.svg" width="38" /></div>
        <span class="grid-item-title">消费记录</span>
      </div>
      <div class="grid-item" @click="goLink('sign')">
        <div><van-image src="https://static.jsvue.cn/5600g/sfc/icons/calendar.svg" width="38" /></div>
        <span class="grid-item-title">我的签到</span>
      </div>
      <div class="grid-item">
        <div><van-image src="https://static.jsvue.cn/5600g/sfc/icons/hot.svg" width="38" /></div>
        <span class="grid-item-title">领券中心</span>
      </div>
      <div class="grid-item">
        <div><van-image src="https://static.jsvue.cn/5600g/sfc/icons/favorite.svg" width="38" /></div>
        <span class="grid-item-title">我的收藏</span>
      </div>
      <div class="grid-item">
        <div><van-image src="https://static.jsvue.cn/5600g/sfc/icons/wallet.svg" width="38" /></div>
        <span class="grid-item-title">我的卡券</span>
      </div>
    </div>
    <div class="m-icon-card">
      <h2>更多服务</h2>
      <div class="grid-item">
        <div><van-image src="https://static.jsvue.cn/5600g/sfc/icons/gallery.svg" width="38" /></div>
        <span class="grid-item-title">邀请海报</span>
      </div>
      <div class="grid-item" @click="checkLogin">
        <div><van-image src="https://static.jsvue.cn/5600g/sfc/icons/invited.svg" width="38" /></div>
        <span class="grid-item-title">邀请列表</span>
      </div>
    </div>

  </m-page>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { useUserStore } from '@/stores/useUserStore'
import { goLogin } from '@/utils/app'
import CountUp from 'vue-countup-v3'

const router = useRouter()
const store = useUserStore()

const $config = useRuntimeConfig()
const { ssrContext } = useNuxtApp()
// console.log(store.userInfo.name, $config, ssrContext)
const title = ref('我的')
const isVip = ref(true)
// 线上不跨域
let info = {}
if (ssrContext) { // ssr 代理
  const headers = useRequestHeaders(['cookie'])
  const { pending, data, refresh } = await useAsyncData('/user/getUserInfo', () => $fetch('/api/user/getUserInfo', {
    method: 'POST',
    headers,
    body: {
      field: ['username', 'nickname', 'gender', 'email', 'email_confirmed', 'mobile', 'mobile_confirmed', 'avatar', 'deviceId', 'dd_openid', 'role', 'register_date', 'status', 'comment', 'realname_auth', 'score']
    }
  }))
  // refresh()
  info = data
} else {
  info = await getUserInfo({
    field: [
      'username',
      'nickname',
      'gender',
      'email',
      'email_confirmed',
      'mobile',
      'mobile_confirmed',
      'avatar',
      'deviceId',
      'dd_openid',
      'role',
      'register_date',
      'status',
      'comment',
      'realname_auth',
      'score'
    ]
  })
}
const { _id, nickname, mobile, avatar, score } = (info.value && info.value.userInfo) ? info.value.userInfo : {}
const userInfo = reactive({
  _id: _id || 0,
  avatar,
  nickname,
  score,
  mobile: mobile && mobile.replace(mobile.substring(3, 7), "****")
})
// console.log(info)

definePageMeta({
  middleware: ['auth']
})
useHead({
  title,
  meta: [
    { name: 'description', content: '' },
    { name: 'keywords', content: '' }
  ]
})

const headBarHandle = () => {
  const { _id } = userInfo
  if (_id) router.push({ path: '/profile' })
  else goLogin()
}

// 特意
const checkLogin = () => {
  goLogin(encodeURIComponent(`${window.location.origin}/user`))
}

// 去页面
const goLink = (target) => {
  if (target === 'sign') router.push({ path: '/sign' })

}
</script>
<style lang="less" scoped>

.m-card, .m-icon-card {
  margin: 10px 12px 0;
  border-radius: 6px;
  background-color: #fff;
}
.m-card {
  // height: 214px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .user-info {
    .head-bar {
      padding: 12px 16px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      &-right {
        display: flex;
        align-items: center;
      }
      .name {
        font-size: 17px;
        line-height: 28px;
        font-weight: bold;
        display: block;
        text-align: right;
        color: #333;
      }
      .phone {
        color: #999;
      }
    }
    .hashboard {
      padding-bottom: 12px;
      display: flex;
      justify-content: space-around;
      .board-item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        span {
          color: #999;
        }
      }
    }
  }
  .user-vip {
    padding: 20px;
    background: linear-gradient(90deg, #0b89e9 0%, #2677d4 100%);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    span.s-title {
      color: #feefe0;
      font-size: 18px;
    }
    .small {
      font-size: 12px;
      line-height: 12px;
      padding: 5px 8px;
      background-color: #fefefe;
      border-radius: 30px;
      color: #333;
      display: inline-flex;
      align-items: center;
    }
    .icon-watt-right {
      font-size: 12px;
    }
  }
}
.m-icon-card {
  padding-bottom: 16px;
  h2 {
    font-size: 16px;
    padding: 12px 16px 0;
    font-weight: bold;
    color: #323232;
  }
  .grid-item {
    width: 25%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-top: 16px;
    &-title {
      color: #333;
      font-size: 14px;
    }
  }
}
</style>
